<div id="root" class="light">
  <div class="ide-container">
    <div class="panel-axis primary-panel-axis" style="flex-direction: column;">
      <div id="BAR_TOP" class="panel-container column" [ngStyle]="{'flex-grow':idePanels.barTop}"
           style="flex-basis:auto;overflow: visible;">
        <div class="top-container">
          <div class="top-logo">
            <img [src]="app.logoColor" alt="" height="100%">
          </div>

          <app-device-data [deviceData]="deviceData" [hasBindDevice]="hasBindDevice"
                           (needBindDevice)="showBindDevice()"></app-device-data>

          <ul class="top-bars">
            <li><i class="top-tool" nz-tooltip nzTitle="{{'Ide0001' | translate}}" nzPlacement="bottom" nz-icon
                   [iconfont]="'icon-save'" (click)="saveFiles()"></i></li>
            <li [ngClass]="{'color-theme':!isRunningCode,'color-red':isRunningCode}">
              <i class="top-tool" nz-tooltip nzTitle="{{'Ide0003' | translate}}" nzPlacement="bottom" nz-icon
                 [iconfont]="'icon-yunhang'" *ngIf="!isRunningCode" (click)="runCode()"></i>
              <i class="top-tool" nz-tooltip nzTitle="{{'Ide0004' | translate}}" nzPlacement="bottom" nz-icon
                 [iconfont]="'icon-pause'" *ngIf="isRunningCode" (click)="pauseCode(true)"></i>
            </li>
          </ul>
        </div>
      </div>

      <div id="Breadcrumb" class="panel-container column"
           [ngStyle]="{'flex-grow':idePanels.barTop}"
           style="flex-basis:auto;overflow:visible;">
        <app-bread-crumb [curFilePath]="curFilePath" [curFileType]="curFileType" [furtherData]="furtherData"></app-bread-crumb>
      </div>

      <div id="PRIMARY" class="panel-container column resizable" [ngStyle]="{'flex-grow':idePanels.primary}">
        <div class="panel-axis" [ngClass]="{'unableSelected': documentEventListener}" style="flex-direction: row;">

          <!--左边条-->
          <div id="BAR_LEFT" class="panel-container row" [ngStyle]="{'flex-grow':idePanels.barLeft}"
               style="flex-basis: auto;">
            <div class="panel">
              <div class="side-bar-container">
                <div class="bar side-bar left">
                  <div class="side-bar-label" [class.active]="isShowMenu" (click)="toggleMenu()">
                    <div class="side-bar-label-container">
                      <div class="side-bar-label-content">
                        <i nz-icon type="folder" theme="fill" class="mr-5"></i>
                        <span class="text" style="width: auto;">{{'Ide0008' | translate}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!--中间区域-->
          <div id="PANEL_MIDDLE" class="panel-container row resizable"
               [ngStyle]="{'flex-grow':idePanels.panelMiddle}">

            <div class="panel-axis" style="flex-direction: column;">
              <div class="panel-container column" style="flex-grow: 100;">
                <div id="PANEL_Center" class="panel-axis" style="flex-direction: column;">

                  <div id="PANEL_TOP" class="panel-container column resizable"
                       [ngStyle]="{'flex-grow':idePanels.topParent}">

                    <div class="panel-axis" style="flex-direction: row;">
                      <!--left-->
                      <div id="PANEL_Left" class="panel-container row resizable"
                           [ngStyle]="{'flex-grow':idePanels.panelLeft,'display': (isShowMenu || isShowExamples)?'': 'none'}">

                        <!--menu-->
                        <div class="panel-axis" style="flex-direction: column;"
                             [ngStyle]="{'display': isShowMenu?'': 'none'}">
                          <div class="panel-container column" style="flex-grow: 0; flex-basis: auto;">
                            <div class="panel model-shown-bar">
                              <span>{{'Ide0008' | translate}}</span>
                              <div class="model-bar-btns">
                                <ng-container *ngIf="furtherData?.canEdit">
                                  <i nz-icon class="color-white cursor" [iconfont]="'icon-add-file'"
                                     nz-tooltip nzTitle="{{'Ide0010' | translate}}" nzPlacement="bottom"
                                     (click)="addFile()"></i>
                                  <i nz-icon class="color-white cursor" [iconfont]="'icon-add-folder'"
                                     nz-tooltip nzTitle="{{'Ide0011' | translate}}" nzPlacement="bottom"
                                     (click)="addFolder()"></i>
                                </ng-container>
                                <i nz-icon class="color-dark-green cursor" type="minus" theme="outline"
                                   nz-tooltip nzTitle="{{'Ide0007' | translate}}" nzPlacement="bottom"
                                   (click)="toggleMenu()"></i>
                              </div>
                            </div>
                          </div>
                          <div class="panel-container column menu-container" style="flex-grow: 100;">
                            <app-menu-tree #menu [showMenu]="isShowMenu"
                                           [addMenu]="addMenu"
                                           [selectedLines]="selectedLine"
                                           [ifBindDevice]="bindDevice"
                                           (whenOpenFile)="openEditor($event)"
                                           (afterRenameMenu)="onRenameMenu($event)"
                                           (afterAddMenu)="resetAddMenu()"
                                           (afterBindDevice)="afterBindDevice($event)"
                                           (afterDeleteMenu)="onDeleteMenu($event)"
                                           (afterLoadFurther)="getFurtherData($event)"></app-menu-tree>
                          </div>
                        </div>

                        <div class="resize-bar col-resize" id="left-resize-bar"></div>
                      </div>

                      <!--center-->
                      <div id="PANEL_Editor" class="panel-container row resizable editor-container"
                           [ngStyle]="{'flex-grow':idePanels.panelCenter}">
                        <nz-tabset [nzType]="'card'" [nzSize]="'small'"
                                   [(nzSelectedIndex)]="selectedEditorTabIndex"
                                   (nzSelectedIndexChange)="getCurEditor($event)">
                          <ng-template #contextTemplate>
                            <ul nz-menu nzInDropDown>
                              <li nz-menu-item (click)="contextCloseTab('cur')">{{'Ide0014' | translate}}</li>
                              <li nz-menu-item (click)="contextCloseTab('others')">{{'Ide0015' | translate}}</li>
                              <li nz-menu-item (click)="contextCloseTab('all')">{{'Ide0016' | translate}}</li>
                            </ul>
                          </ng-template>
                          <ng-container *ngIf="editorTabs && editorTabs.length >= 1">
                            <nz-tab *ngFor="let tab of editorTabs" [nzTitle]="titleTemplate">
                              <ng-template #titleTemplate>
                                <div (contextmenu)="contextMenu($event,contextTemplate,tab)">
                                  <ng-container *ngIf="tab.codeType === codeTypes.blocklyPython3; else blocklyBlock">
                                    <i nz-icon [iconfont]="'icon-blockly'"></i>
                                  </ng-container>
                                  <ng-template #blocklyBlock><i nz-icon [iconfont]="tab.title | fileType" class="mr-5"></i></ng-template>

                                  <span [ngClass]="{'color-orange': tab.isValueChange,'color-red': !tab.id}">{{ tab.title }}</span>
                                  <i class="ant-tabs-close-x" [hidden]="!tab.closeable" (click)="closeTab(tab)">×</i>
                                  <ng-container *ngIf="!tab.readonly">
                                    <i class="ant-tabs-state" [hidden]="!tab.isValueChange"
                                       [ngClass]="{'color-orange': tab.isValueChange}">●</i>
                                    <i class="ant-tabs-state" [hidden]="tab.isValueChange"> </i>
                                  </ng-container>
                                </div>
                              </ng-template>
                              <div class="editor-wrapper">
                                <div class="cover" *ngIf="documentEventListener"></div>
                                <ng-container *ngIf="tab.codeType === codeTypes.blocklyPython3; else plainFileBlock">
                                  <iframe src="assets/blockly/index.html" name="blocklyHome" frameborder="0" class="w100 h100"></iframe>
                                </ng-container>
                                <ng-template #plainFileBlock>
                                  <div class="scale-btn">
                                    <i nz-icon [iconfont]="'icon-fangda'" class="cursor"
                                       [ngClass]="{'filter-gray': aceConfig.config.fontSize >= 30}"
                                       (click)="changeEditorFont(true)"></i>
                                    <i nz-icon [iconfont]="'icon-suoxiao'" class="cursor"
                                       [ngClass]="{'filter-gray': aceConfig.config.fontSize <= 12}"
                                       (click)="changeEditorFont(false)"></i>
                                  </div>
                                  <ace #aceEditor [config]="aceConfig.config"
                                       (focus)="makeAutocompletion($event,tab)"
                                       (valueChange)="onValueChanged($event,tab)"
                                       [mode]="tab.title | fileType: 'language'"
                                       [theme]="aceConfig.theme"
                                       [(value)]="tab.code"
                                       (changeSelection)="onSelectionChange($event,editorContextTemplate)"></ace>
                                </ng-template>
                              </div>
                            </nz-tab>
                          </ng-container>
                          <ng-container *ngIf="editorTabs && editorTabs.length === 0 || !editorTabs">
                            <nz-tab [nzTitle]="'Ide0018' | translate">
                              <app-summary></app-summary>
                            </nz-tab>
                          </ng-container>

                        </nz-tabset>
                        <div class="resize-bar col-resize" id="right-resize-bar"
                             [ngStyle]="{'display': isShowRight?'': 'none'}"></div>
                      </div>
                      <ng-template #editorContextTemplate>
                        <ul nz-menu nzInDropDown>
                          <li nz-menu-item (click)="createBlockInFurther()">
                            <i nz-icon type="code" theme="twotone"></i>
                            {{'Ide0075' | translate}}
                          </li>
                        </ul>
                      </ng-template>

                      <!--right-->
                      <div id="PANEL_Right" class="panel-container row resizable"
                           [ngStyle]="{'flex-grow':idePanels.panelRight,'display': isShowRight?'': 'none'}">
                        <div class="panel-axis" style="flex-direction: column;">
                          <div class="panel-container column" style="flex-grow: 0; flex-basis: auto;">
                            <div class="panel model-shown-bar">
                              <span>{{'Ide0009' | translate}}</span>
                              <div class="model-bar-btns">
                                <i nz-icon class="color-white cursor" [iconfont]="'icon-clean'"
                                   nz-tooltip nzTitle="{{'Ide0021' | translate}}" nzPlacement="top"
                                   (click)="cleanLogs()"></i>
                                <i nz-icon class="color-dark-green cursor" type="minus" theme="outline"
                                   nz-tooltip nzTitle="{{'Ide0007' | translate}}" nzPlacement="top"
                                   (click)="toggleRight()"></i>
                              </div>
                            </div>
                          </div>
                          <div class="panel-container column" style="flex-grow: 100;">
                            <div class="cover" *ngIf="documentEventListener"></div>
                            <app-terminal #terminal [showTerminal]="isShowRight" [resize]="isResizeXterm"
                                          (afterFileExecuteComplete)="onFileExecuteComplete($event)"
                                          (afterConnectClose)="onConnectClose($event)"></app-terminal>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!--右边条-->
          <div id="BAR_RIGHT" class="panel-container row" [ngStyle]="{'flex-grow':idePanels.barRight}"
               style="flex-basis: auto;">
            <div class="panel">
              <div class="side-bar-container">
                <div class="bar side-bar right">
                  <div class="side-bar-label" [class.active]="isShowRight" (click)="toggleRight()">
                    <div class="side-bar-label-container">
                      <div class="side-bar-label-content">
                        <i nz-icon type="bars" theme="outline" class="mr-5"></i>
                        <span class="text" style="width: auto;">{{'Ide0009' | translate}}</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
